<template>
    <div>
        <swiper
            class="header-swiper"
            :options="swiperOption"
        >
          <swiper-slide v-for="(item,index) in swiperList" :key="index">
              <img :src="item.imgUrl" alt="" class="img">
          </swiper-slide>


           <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    data(){
        return{
            swiperOption:{
                pagination:{
                    el:'.swiper-pagination'
                },
                loop:true,
                autoplay:true,
                speed:3000 
            },
            swiperList:[
                {
                    id:"01",
                    imgUrl:"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/cd159d07551d6506de88e0e2b04047ce.jpg_750x200_8a1f27c0.jpg",
                },
                {
                    id:"02",
                    imgUrl:"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/ed5f4115226306e48e6fad106a038afe.jpg_750x200_64df48d6.jpg"
                },
                {
                    id:"03",
                    imgUrl:"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/87a224d0349d94a11e97f31aa1aba4f5.jpg_750x200_1f78af87.jpg"
                },
            ]
        }
    }
}
</script>

<style scoped>
.swiper-slide .img{
    width:100%;
    height: 2rem;
}
.header-swiper >>> .swiper-pagination-bullet-active{
    background: #fff;
}
</style>
